import React, { memo } from "react";
import './StyleGrid.less'


export default memo(function ({ label, value, readonly, children, onChange }) {
  return (
    <div className="form-item row flex-center">
      <div className="col-8 form-item-label">
        <label>{ label }</label>
      </div>
      <div className={`col-16 form-item-control ${readonly ? 'readonly' : ''}`}>
        {
          readonly ? (
            value || children
          ) : (
            <input
              type='text'
              className="cb-input"
              placeholder="请输入"
              defaultValue={value}
              onChange={onChange}
            />
          )
        }
      </div>
    </div>
  )
})
